
import React, { Component } from 'react'

// 加载样式
import style from './progress.scss'
import 'style/payment.scss'
export default class Progress extends Component {
    constructor(props) {
        super(props);
        /*
        * style.icon_success      成功绿色大圆
        * style.icon_error        失败红色大圆
        * style.icon_moren_error  失败红色中圆
        * style.icon_moren        默认灰色中圆
        * */
        this.state={
            dot_one: style.icon_success,
            dot_two: style.icon_moren,
            dot_three: style.icon_moren,

            line_one: '#ababab',
            line_two: '#ababab',
	          line_three: '#ababab',

            text_one_color: '#00B488',
            text_two_color: '#ababab',
            text_three_color: '#ababab',

            text_one:'支付订单',
            text_two:'处理订单',
            text_three:'订单完成'
        }
    }
    componentWillMount() {

    }

	  componentDidMount(){

		  //是否可退款

		  /*
		  switch (oe.getStatus()) {
			  case 1: res.setStatusName("待支付"); res.setStatusDesc("待支付");  break;
			  case 2:res.setStatusName("支付成功");
				  switch (oe.getProgressStatus()) {
					 case 1:case 2: case 4: case 6:case 7:
					  case 8:
					  res.setStatusDesc("支付成功"); res.setStatusDescDetail("订单正在处理,请耐心等待"); break;
					  case 3:
					  res.setStatusDesc("预约受理失败"); res.setCanRefund(1);break;
					  case 5:
						  res.setStatusDesc("上门收件失败"); res.setCanRefund(1); break;
					  case 9:
						  res.setStatusDesc("制证失败"); res.setCanRefund(1);  break;
					  default:
						  break;
				  }
				  break;
			  case 3:
				  res.setStatusName("退单申请中"); res.setStatusDesc("退单申请中");  break;
			  case 4:
				  //已退单
				  res.setStatusName("订单关闭");  res.setStatusDesc("订单关闭");
				  res.setStatusDescDetail("订单已取消,相关费用已退回原支付账号（信用卡到账可能需要2-5个工作日）");  break;
			  case 5:
				  //已失效 res.setStatusName("已失效"); res.setStatusDesc("订单关闭");res.setStatusDescDetail("订单已取消"); break;
			  case 8:
				  //已完成  res.setStatusName("订单完结");  res.setStatusDesc("订单交易成功"); break;
			  default:
				  res.setStatusName("其他");
				  break;
		  }
			*/

		  /*  0  默认   #00B488 绿色   #ababab 灰色
			*   1  处理订单
			*
			*   2  订单完成
			*
			*   3  订单失败
			*   4  取消订单
			* */
	  }

    orderStatus(state){
	  	console.log(state)
	    switch (state){
		    case 0:
			    this.setState({
				    dot_one: style.icon_success,
				    dot_two: style.icon_moren,
				    dot_three: style.icon_moren,

				    line_one: '#ababab',
				    line_two: '#ababab',

				    line_three: '#ababab',

				    text_one_color: '#00B488',
				    text_two_color: '#ababab',
				    text_three_color: '#ababab',

				    text_one:'支付订单',
				    text_two:'处理订单',
				    text_three:'订单完成'
			    });
			    break;
		    case 1:
			    this.setState({
				    dot_one: style.icon_success,
				    dot_two: style.icon_success,
				    dot_three: style.icon_moren,

				    line_one: '#00B488',
				    line_two: '#00B488',

				    line_three: '#ababab',

				    text_one_color: '#00B488',
				    text_two_color: '#00B488',
				    text_three_color: '#ababab',

				    text_one:'支付订单',
				    text_two:'处理订单',
				    text_three:'订单完成'
			    });
			    break;
		    case 2:
			    this.setState({
				    dot_one: style.icon_success,
				    dot_two: style.icon_success,
				    dot_three: style.icon_moren,

				    line_one: '#00B488',
				    line_two: '#00B488',

				    line_three: '#ababab',

				    text_one_color: '#00B488',
				    text_two_color: '#00B488',
				    text_three_color: '#ababab',

				    text_one:'支付订单',
				    text_two:'处理订单',
				    text_three:'订单完成'
			    });
			    break;
		    case 3:
			    this.setState({
				    dot_one: style.icon_success,
				    dot_two: style.icon_error,
				    dot_three: style.icon_moren,

				    line_one: '#00B488',
				    line_two: '#00B488',

				    line_three: '#ababab',

				    text_one_color: '#00B488',
				    text_two_color: 'red',
				    text_three_color: '#ababab',

				    text_one:'支付订单',
				    text_two:'办理失败',
				    text_three:'订单完成'
			    });
			    break;
		    case 4:
			    this.setState({
				    dot_one: style.icon_success,
				    dot_two: style.icon_moren_error,
				    dot_three: style.icon_error,

				    line_one: '#00B488',
				    line_two: '#00B488',

				    line_three: 'red',

				    text_one_color: '#00B488',
				    text_two_color: 'red',
				    text_three_color: 'red',

				    text_one:'支付订单',
				    text_two:'办理失败',
				    text_three:'订单关闭'
			    });
			    break;
		    case 5:
			    this.setState({
				    dot_one: style.icon_success,
				    dot_two: style.icon_moren_error,
				    dot_three: style.icon_error,

				    line_one: '#00B488',
				    line_two: '#00B488',

				    line_three: 'red',

				    text_one_color: '#00B488',
				    text_two_color: 'red',
				    text_three_color: 'red',

				    text_one:'支付订单',
				    text_two:'办理失败',
				    text_three:'订单已失效'
			    });
			    break;
		    case 8:
			    this.setState({
				    dot_one: style.icon_success,
				    dot_two: style.icon_success,
				    dot_three: style.icon_success,

				    line_one: '#00B488',
				    line_two: '#00B488',

				    line_three: '#00B488',

				    text_one_color: '#00B488',
				    text_two_color: '#00B488',
				    text_three_color: '#00B488',

				    text_one:'支付订单',
				    text_two:'处理订单',
				    text_three:'订单完成'
			    });
			    break;
	    }

    }
	componentWillReceiveProps(nextprops){
		this.orderStatus(nextprops.status)
	}

    render() {
			console.log(this.props.status)

        return (
            <div className={style.progress}>
                {/*<!-- top  start-->*/}
                <div className={style.am_flexbox}>
                    <div className={style.am_flexbox_item}>
                        <span className={style.cx_time_icon+' '+this.state.dot_one}></span>
                        <div className={style.cx_time_border} style={{left:'50%',background: `${this.state.line_one}`}}></div>
                    </div>
                    <div className={style.am_flexbox_item}>
                        <span className={style.cx_time_icon+' '+this.state.dot_two}></span>
                        <div className={style.cx_time_border} style={{background:`${this.state.line_two}`,display: 'none'}}></div>
                    </div>
                    <div className={style.am_flexbox_item}>
                        <span className={style.cx_time_icon+' '+this.state.dot_three}></span>
                        <div className={style.cx_time_border}  style={{right:'50%',background:`${this.state.line_three}`}}></div>
                    </div>
                </div>
                <div className={style.am_flexbox}>
                    <div className={style.am_flexbox_item+' '+style.am_text_color} style={{color: `${this.state.text_one_color}`}}>
                      {this.state.text_one}
                    </div>
                    <div className={style.am_flexbox_item+' '+style.am_text_color} style={{color: `${this.state.text_two_color}`}}>
                      {this.state.text_two}
                    </div>
                    <div className={style.am_flexbox_item+' '+style.am_text_color} style={{color: `${this.state.text_three_color}`}}>
                      {this.state.text_three}
                    </div>
                </div>
                {/*<!-- top  end-->*/}
            </div>

        );
    }
}
// 
Progress.defaultProps = {
    // 需要的数据格式
    // list: [
    //     { key: 0, label: '', check: false, value: '' },
    // ]
} 
